<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课程表-v1.1</title>
		<style>
			main {
				text-align: center;
			}
			
			* {
				margin: 0px auto;
			}
			
			.section-table {
				width: 100%;
				overflow: auto;
			}
			
			h3 {
				margin-top: 15px;
				margin-bottom: 15px;
			}
			
			table, th, td{
				border: 1px solid #FF7777;
				/* 收紧单元格之间的边框 */
				border-collapse: collapse;
				width: 800px;
			}
			
			th, td{
				padding: 6px;
				color: #000000;
			}
			
			/* 隔行效果：奇数行 */
			tbody>tr:nth-child(odd) {
				background-color: #77FF77;
			}
			
			/* 隔行效果：偶数行 */
			tbody>tr:nth-child(even) {
				background-color: #7777FF;
			}
			
			/* 鼠标浮动 */
			tbody>tr:nth-child(n):hover {
				background-color: #ffff7f;
			}
			
			.row-head {
				background-color: #ffff7f;
			}
		</style>
	</head>
	<body>
		<main>
			<h3>学习课程表</h3>
			<section class="section-table">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>时间</th>
						<th>内容</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="row-head">上午</td>
						<td>09:30-12:00</td>
						<td>基础知识学习</td>
					</tr>
					<tr>
						<td class="row-head">中午</td>
						<td>12:00-14:00</td>
						<td>午休时间</td>
					</tr>
					<tr>
						<td class="row-head" rowspan="4">下午</td>
						<td>14:00-14:30</td>
						<td>整理总结</td>
					</tr>
					<tr>
						
						<td>14:00-16:00</td>
						<td>自主练习、难点解答</td>
					</tr>
					<tr>
						
						<td>16:00-17:30</td>
						<td>数据工作</td>
					</tr>
					<tr>
						<td>17:30-18:00</td>
						<td>晚餐休息</td>
					</tr>
					<tr>
						<td class="row-head">晚上</td>
						<td>18:00-20:00</td>
						<td>晚自习</td>
					</tr>
				</tbody>
			</table>
			</section>
		</main>
	</body>
</html>
